<template>
  <span>
    <a-dropdown style="display: inline-block; height: 100%; vertical-align: initial">
      <span style="cursor: pointer">
        <a-avatar class="avatar" size="small" shape="circle" :src="currUser.avatar" />
        <span>{{currUser.name}}</span>
      </span>
      <a-menu style="width: 150px" slot="overlay">
        <a-menu-item>
          <a-icon type="user" />
          <span>个人中心</span>
        </a-menu-item>
        <a-menu-item @click="settingDialogShow = true">
          <a-icon type="setting" />
          <span>设置</span>
        </a-menu-item>
        <a-menu-divider />
        <a-menu-item>
          <router-link to="/login">
            <a-icon type="poweroff" />
            <span>退出登录</span>
          </router-link>
        </a-menu-item>
      </a-menu>
    </a-dropdown>
    <a-modal title="设置" v-model="settingDialogShow" :okText="null" @ok="settingDialogShow = false">
      <setting />
    </a-modal>
  </span>
</template>

<script>
import Setting from '@/components/setting/Setting';
export default {
  name: 'HeaderAvatar',
  components: { Setting },
  data() {
    return { settingDialogShow: false };
  },
  computed: {
    currUser() {
      return this.$store.state.user;
    }
  },

  methods: {}
};
</script>

<style lang="less" scoped>
.avatar {
  margin: 14px 4px 20px 0;
  color: #1890ff;
  background: hsla(0, 0%, 100%, 0.85);
  vertical-align: middle;
}
</style>
